<template>
  <el-time-picker
    class="anvil-code-date-range"
    is-range
    v-model="timeValue"
    :disabled="disabled"
    :format="showFormat"
    :value-format="valueFormatStr"
    :start-placeholder="startPlaceholder"
    :end-placeholder="endPlaceholder"
    style="width: 100%;"
  >
  </el-time-picker>
</template>
  <script>
  export default {
    name: 'TimeRange',
    props: {
      modelValue: {
        type: Array,
        default: () => []
      },
      disabled:{
        type: Boolean,
        default: false
      },
      valueFormatStr: {
        type: String,
        default: ''
      },
      showFormat: {
        type: String,
        default: ''
      },
      startPlaceholder: {
        type: String,
        default: '开始日期'
      },
      endPlaceholder: {
        type: String,
        default: '结束日期'
      }
    },
    data() {
      return {
        timeValue: []
      }
    },
    watch: {
      modelValue: {
        handler(newVal) {
            this.timeValue = newVal
        },
        immediate: true
      },
      timeValue: {
        handler(newVal) {
          if (newVal) {
            this.$emit('update:modelValue', newVal)
          } else {
            this.timeValue = []
          }
        },
        deep: true
      }
    }
  }
  </script>
  